<template>
  <div class='upload-list-box'>
    <!--头-->
    <Top>
      <p class="title" slot="midPart">课程上传</p>
      <!-- v-if="inApp()" -->
      <i
          class="el-icon-arrow-left back" 
          slot="leftPart" 
          @click="appBack()"></i>
      <div class='upload-list' slot='rightPart'>
        <p @click='goto("toVideoList", "ToUpLaodList")' class='icon-btn' style='margin-right: .32rem'>
          <img src="./../../assets/class_list.png" alt="">
          <span>列表</span>
        </p>
        <p @click='goto("toUploadVideo", "ToUpLaodController")' class='icon-btn'>
          <img src="./../../assets/class-upload.png" alt="">
          <span>我要上传</span>
        </p>
      </div>
    </Top>
    <!-- <Swiper :imgList="imgList" v-if="imgList.length>0"></Swiper> -->
    <div class='banner'>
      <img src="./../../assets/banner.png" alt="">
    </div>
    <div class='clazz_list_wrap' v-if='lessionList.length > 0'>
      <cube-scroll
        ref="scroll"
        :data="lessionList"
        :options="scrollOptions"
        @pulling-up="onPullingUp">
        <div class='clazz_list'>
          <template v-for='(i, index) in lessionList'>
            <class-item class='class_item' v-if='i.video' :key='index'
              :classType='i.lession_num_hour <= 1 ? true : false'
              :title='i.lession_name'
              :status='i.video[0].video_status || 0'
              :src='i.lession_img'
              :time='i.lession_time'
              :playCount='i.video[0].lession_view || 0'
              :price='i.lession_price'
              :flower='i.video[0].comment_num || 0'
              :upvote='i.video[0].praise_num || 0'
              :maxCount='i.lession_num_hour'
              :currentCount='i.video.length || 1'
              @itemClick='itemClick(i)'
              @remove='remove(i, index)'
              @edit='edit(i, index)'
              @add='add(i)'
              @statusClick='statusClick(i)'
            ></class-item>
          </template>
        </div>
      </cube-scroll>
    </div>
    <!--无数据时显示-->
    <div class="mid" v-if='getMemberId() && lessionList.length <= 0'>
        <div class="nodata animated fadeIn">
            <img src="./../../assets/huawa-off.png" alt="" />
            <p>暂无数据..</p>
        </div>
    </div>
    <!-- 没登录 -->
    <div class="mid" v-if='!getMemberId()'>
        <div class="nodata animated fadeIn">
            <img src="./../../assets/huawa-off.png" alt="" />
            <p>亲爱的花艺师，您还未登录哦</p>
            <p class='flex_align_center'><router-link to='/login' class='login-btn'>去登录</router-link></p>
        </div>
    </div>
    <Tabbar :data="{index:3}"></Tabbar>
  </div>
</template>
<script>
import Tabbar from './../smallCom/Tabbar'
import Top from '@/components/smallCom/Top'
import Swiper from '@/components/smallCom/Swiper'
import ClassItem from './../../components/uploadVues/ClassItem'
export default {
  components: {
    Tabbar,
    Top,
    Swiper,
    ClassItem
  },
  data () {
    return {
      imgList: ['./../../assets/banner.png'],
      lessionList: [],
      /*上拉加载*/
      scrollOptions: {
        pullUpLoad: {
          threshold: 20,
          txt: {
            more: '加载更多..',
            noMore: '没有更多了..'
          }
        }
      },
      // 当前页码
      page: 1
    }
  },
  mounted () {
    this.onPullingUp()
    this.$nextTick(() => {
      window.loadNewest = this.loadNewest
    })
  },
  methods: {
    itemClick (item) {
      this.$router.push(`videocheck?lession_id=${item.lession_id}`)
      // if (item.video[0].video_status === 1) {
      //   this.$router.push(`detail?lession_id=${item.lession_id}&member_id=${this.getMemberId()}`)
      // } else if (item.video[0].video_status === 2) {
      //   this.$message({type: 'info', message: '审核中！不能播放'})
      // } else {
      //   this.$msgbox({title: '失败理由', message: item.video[0].fail_reason})
      // }
    },
    loadNewest () {
      // alert('alert')
      // window.location.reload()
      this.page = 1
      this.lessionList = []
      this.onPullingUp()
    },
    onPullingUp () {
      this.getList(this.page).then(res => {
        // console.log(this)
        if (res.lession.length > 0) {
          this.page++
          this.lessionList = this.lessionList.concat(res.lession)
        } else {
          this.$refs.scroll.forceUpdate()
        }
      }, err => {})
    },
    statusClick (item) {
      if (item.video[0].video_status === 3) {
        this.$msgbox({title: '失败理由', message: item.video[0].fail_reason})
      }
    },
    // 删除视频
    remove (i, index) {
      this.$confirm('确定删除？', '提示').then(() => {
        this.Posthttp('/?method=flower.set.hideLession',{lession_id: i.lession_id},(res) => {
          let data = JSON.parse(res.bodyText)
          if (data.status === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.lessionList.splice(index, 1)
            // this.loadNewest()
          } else {
            this.$message({
              type: 'success',
              message: '操作失败！'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })         
      })
    },
    // 编辑视频
    edit (i, index) {
      let str = JSON.stringify(i)
      console.log(str)
      if(this.deviceType()=== 1){//安卓
        window.hy.toHyEdit(str, index);
      }else if(this.deviceType() === 2){//IOS
        window.webkit.messageHandlers.TOEditController.postMessage(str)
      }
    },
    // 新增视频
    add (i) {
      let str = JSON.stringify(i)
      if(this.deviceType()=== 1){//安卓
        window.hy.toHyVideoAdd(i.lession_id, i.lession_num_hour, i.video.length);
      }else if(this.deviceType() === 2){//IOS
        window.webkit.messageHandlers.TOADD_COURSE.postMessage(str)
      }
    },
    goto (androidFunName, iosFunName) {
      if(this.deviceType()=== 1){//安卓
        window.hy[androidFunName]();
      }else if(this.deviceType() === 2){//IOS
        window.webkit.messageHandlers[iosFunName].postMessage(null)
      } else {
        this.$router.push('/bag/upguid')
      }
    },
    // 跳转到原声的上传列表页面
    // gotoList () {
    //   if(this.deviceType()=== 1){//安卓
    //       window.hy.toVideoList();
    //   }else if(this.deviceType() === 2){//IOS
    //       // window.webkit.messageHandlers.hyShowVideoListUI.postMessage(null)
    //   }
    // },
    // // 跳转到原声的上传页面
    // gotoUpload () {
    //   if(this.deviceType()=== 1){//安卓
    //       window.hy.toUploadVideo();
    //   }else if(this.deviceType() === 2){//IOS
    //       // window.webkit.messageHandlers.hyShowVideoListUI.postMessage(null)
    //   }
    // },
    // gotoEdit () {
    // },
    // 获取视频列表
    getList (page) {
      return new Promise((resolve, reject) => {
        this.Posthttp('/?method=app.teacher.teacherlessionlist',{member_id: this.getMemberId(), page: page},(res)=>{
          let data = JSON.parse(res.bodyText)
          if (data.status === 1) {
            resolve(data.data)
          } else {
            reject(new Error())
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-list-box{
  padding: .8rem 0 1rem;
  // display: flex;
  // flex-direction: column;
}
.banner{
  img{
    display: block;
    width: 100%;
  }
}
.clazz_list_wrap{
  // flex: 1;
  position: fixed;
  top: 2.44rem;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 500px;
}
.clazz_list{
  padding:0 .26rem;
  .class_item{
    &:last-child{
      border-bottom-color: transparent;
    }
  }
}
.flex_align_center{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.login-btn{
  color:salmon;
  border: 1px solid salmon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: .2rem;
}
</style>
